<template>
  <div>
    <listLayoutVue>
      <template #title>主题列表</template>
      <template #operation>
        <Button class="mr16" type="primary" @click="handleAddTheme">添加主题</Button>
      </template>

      <template #form>
        <Form class="custom-ivu-form" inline :label-width="80" @submit.native.prevent="handleFormSubmit">
          <FormItem label="关键词">
            <Input
              v-model="formData.keyword"
              :label-width="60"
              placeholder="请输入"
              class="form-item--width"
              size="large"
              clearable
            ></Input>
          </FormItem>

          <FormItem label="主题状态">
            <Select
              v-model="formData.state"
              class="form-item--width"
              element-id="select2"
              clearable
              @on-change="handleFormSubmit"
            >
              <Option v-for="(nt, i) of themeStates" :key="i" :value="nt.key">{{ nt.value }}</Option>
            </Select>
          </FormItem>

          <FormItem label="时间选择" class="width-auto">
            <TimeRange
              class="custom-time-range"
              v-model="formData.timeType"
              @on-time-type-change="handleTimeTypeChange"
              @on-date-range-change="handleTimeRange"
            />
          </FormItem>

          <Button class="btn-search" type="primary" html-type="submit">查询</Button>
        </Form>
      </template>

      <template #table>
        <CommonTablePage
          class="mt20"
          :loading="tableLoading"
          :columns="columns"
          :tableData="tableData"
          :current="formData.pageNo"
          :total="pagination.total"
          @on-change="handlePageChange"
          @on-page-size-change="handlePageSizeChange"
        ></CommonTablePage>
      </template>
    </listLayoutVue>

    <ModalCreateTheme :visible.sync="visible.add" @on-add-success="handleFormSubmit"></ModalCreateTheme>
    <ModalEditTheme
      :visible.sync="visible.edit"
      :form-data="currentEditItem"
      @on-edit-success="handleFormSubmit"
    ></ModalEditTheme>
  </div>
</template>

<script>
// components
import listLayoutVue from '@/components/listLayout/listLayout.vue'
import CommonTablePage from '@/components/common/CommonTablePage/CommonTablePage'
import ModalCreateTheme from './components/ModalCreateTheme.vue'
import ModalEditTheme from './components/ModalEditTheme.vue'
import TimeRange from '@/components/customFrom/TimeRange'
//util
import { createCommonPagination } from '@/utils/service.js'
import { cloneDeep } from '@/utils/uitls.js'
import { createColumns, createForm } from './service'

import mixin from './mixin'
export default {
  name: 'ThemeList',

  components: { listLayoutVue, CommonTablePage, ModalCreateTheme, ModalEditTheme, TimeRange },

  mixins: [mixin],

  data() {
    return {
      formData: createForm(),
      themeStates: [],

      tableLoading: false,
      columns: createColumns(this),
      tableData: [],
      currentEditItem: {},

      pagination: createCommonPagination(),

      visible: {
        add: false,
        edit: false,
      },
    }
  },

  methods: {
    handleAddTheme() {
      this.visible.add = true
    },

    handleTimeRange(date) {
      this.formData.startTime = date[0]
      this.formData.endTime = date[1]
      this.handleFormSubmit()
    },

    handleTimeTypeChange(v) {
      if (v === '自定义') {
      } else {
        this.formData.startTime = ''
        this.formData.endTime = ''
        this.handleFormSubmit()
      }
    },

    handleFormSubmit(no_reset) {
      if (no_reset !== true) {
        this.formData.pageNo = 1
      }
      this.getThemeList({ ...this.formData })
    },

    handleTableRowEdit(row) {
      // console.log(row)
      this.currentEditItem = cloneDeep(row)
      this.visible.edit = true
    },

    handleTableRowDelete(row) {
      // console.log(row)
      this.deleteTheme(row.id)
    },

    handlePageChange(page) {
      this.formData.pageNo = page
      this.handleFormSubmit(true)
    },
    handlePageSizeChange(pageSize) {
      this.formData.pageSize = pageSize
      this.handleFormSubmit(true)
    },
  },

  mounted() {
    this.getThemeStates()
    this.handleFormSubmit()
  },
}
</script>

<style lang="less" scoped>
.custom-time-range {
  /deep/ .ivu-select {
    width: 12vw;
  }
}
</style>
